<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      li {
        list-style: none;
      }
      #ul1 {
        width: 600px;
        height: 250px;
      }
      #ul1 li {
        width: 100px;
        height: 100px;
        background: red;
        float: left;
        overflow: hidden;
        margin: 10px;
      }
      a {
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <ul id="ul1"></ul>
    <div id="div1">
      <!--<a href="#1">首页</a>
    <a href="#3">上一页</a>
    <a href="#2">[2]</a>
    <a href="#3">[3]</a>
    <a href="#4">4</a>
    <a href="#5">[5]</a>
    <a href="#6">[6]</a>
    <a href="#5">下一页</a>
    <a href="#10">尾页</a>-->
    </div>
    <script>
      var json = {
        title: [
          '效果1',
          '效果2',
          '效果3',
          '效果4',
          '效果5',
          '效果6',
          '效果7',
          '效果8',
          '效果9',
          '效果10',
          '效果11',
          '效果12',
          '效果13',
          '效果14',
          '效果15',
          '效果16',
          '效果17',
          '效果18',
          '效果19',
          '效果20',
          '效果21',
          '效果22',
          '效果23',
          '效果24',
          '效果25',
          '效果26',
          '效果27',
          '效果28',
          '效果29',
          '效果30',
          '效果31',
          '效果32',
          '效果33',
          '效果34',
          '效果35',
          '效果36',
          '效果37',
          '效果38',
          '效果39',
          '效果40',
          '效果41',
          '效果42',
          '效果43',
          '效果44',
          '效果45',
          '效果46',
          '效果47',
          '效果48',
          '效果49',
          '效果50',
          '效果51',
        ],
      }
    </script>
    <script>
          var arr=[];
    var iNow = 9;
    page({
        id:'div1',
        nowNum:1,
        allNum:Math.floor(json.title.length/10),
        callBack:function(){alert(0)}
    });
 
    function page(opt){
        if(!opt.id){
            return false;
        }
        var obj = document.getElementById(opt.id);
        var nowNum = opt.nowNum||1;
        var allNum = opt.allNum||5;
        var callBack = opt.callBack||function(){};
        if(nowNum>=4&&allNum>=6){//首页出现的情况，就是当现在的页码大于等于4并且总页码大于等于6时
            var oA = document.createElement('a');
            oA.href = '#1';
            oA.innerHTML = '首页';
            obj.appendChild(oA);
        }
        if(nowNum>=2){//只要页码大于等于2就会出现上一页
            var oA = document.createElement('a');
            oA.href = '#'+(nowNum - 1);
            oA.innerHTML = '上一页';
            obj.appendChild(oA);
        }
        if(allNum<=5){//因为我们让一页最多显示5个页码，所以，如果总页码小与等于5，就说明页码可以显示完全
            for(var i=1;i<=allNum;i++){
                var oA = document.createElement('a');
                oA.href = '#'+i;
                if(nowNum==i){
                    oA.innerHTML = i;
                }else{
                    oA.innerHTML = '['+i+']';
                }
                obj.appendChild(oA);
            }
        }
        else{//下面的情况是当总页码大于5的时候进行的分类
            for(var i=1; i<=5;i++){
                var oA = document.createElement('a');
                if(nowNum == 1||nowNum==2){//在总页数大于5的情况下继续根据当前页进行细分。如果当前的页为1或者为2的时候
                    oA.href = '#'+i;
                    if(nowNum ==i){
                        oA.innerHTML = i;
                    }else{
                        oA.innerHTML = '['+i+']'
                    }
                }else if((allNum - nowNum)==0||(allNum - nowNum)==1){//如果当前页为最后一页或者倒数第二页的时候，说明显示的5页即为最后5页，所以就是下面的公式
                    oA.href = '#'+(allNum - 5+i);
                    if((allNum - nowNum)==0&&i==5){
                        oA.innerHTML = (allNum - 5 + i);
                    }else if((allNum - nowNum)==1&&i==4){
                        oA.innerHTML = (allNum - 5 +i);
                    }else{
                        oA.innerHTML = '['+(allNum - 5 +i)+']'
                    }
                }else{//当前页码处在5个页码的中间的时候
                    oA.href = '#'+(nowNum - 3 +i);
                    if(i==3){
                        oA.innerHTML = (nowNum - 3 + i);
                    }else{
                        oA.innerHTML = '['+(nowNum - 3 +i)+']'
                    }
                }
                obj.appendChild(oA);
            }
        }
        if((allNum - nowNum)>=1){//如果总页数比当前页码大于等于1的时候显示‘下一页’
            var oA = document.createElement('a');
            oA.href = '#'+(nowNum+1);
            oA.innerHTML = '下一页';
            obj.appendChild(oA);
        }
        if((allNum - nowNum)>=3&&allNum>=6){//如果总页数比当前页码大于等于3并且总页码大于等于6的时候显示‘尾页’；
            var oA = document.createElement('a');
            oA.href = '#'+allNum;
            oA.innerHTML = '尾页';
            obj.appendChild(oA);
 
        }
        callBack(nowNum,allNum);
        var aA = obj.getElementsByTagName('a');
        for(var i=0; i<aA.length;i++){
            aA[i].onclick = function(){
                var nowNum = parseInt(this.getAttribute('href').substring(1));//得到当前的页码数
                obj.innerHTML = '';
                page({
                    id : opt.id,
                    nowNum : nowNum,
                    allNum : allNum,
                    callBack : callBack}
 
                );
                return false;
            }
        }
    }
    </script>
  </body>
</html>
